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Preface 


This book was written to help anyone want to get started with ASP.NET 5 core. It 
describes ASP.NET 5 core deploying and the basic elements of ASP.NET 5 core and 
shows how to work with several ASP.NET 5 core features. 


Agus Kurniawan 
Berlin & Depok, June 2015 



1. Preparing Development Environment 



1.1 ASP.NET 5 


ASP.NET 5 is a lean and composable framework for building web and cloud applications. 
ASP.NET 5 is fully open source and available on GitHub, http://github.com/aspnet/home . 
ASP.NET 5 is currently in preview when this book is written. 

This book will focus on how to develop ASP.NET 5 on OS X, Linux and Windows 
platforms. We use ASP.NET 5 core beta4. 



1.2 System Requirements 


For testing, I use Debian/Ubuntu Linux, OS X Yosemite and Windows 8.1. You can use 
any Linux distribution which inheritanced from Debian based. 



1.3 Development Tools 


In general, we can use any editor to write ASP.NET 5program. I recommend to use 
Sublime Text, http://www.sublimetext.com/ , to write ASP.NET 5 codes. Microsoft also 
released Visual Studio Code and you can download it on https://code.visualstudio.com/ . 




2 Deploying ASP.NET 5 on OS X 


In this chapter we will learn how to deploy ASP.NET 5 on OS X. 



2.1 Getting Started 


In this section we start to deploy ASP.NET 5 on OS X. In this book I use ASP.NET 5 
preview, beta4. Please follow installation steps on next section. 



2.2 Deploying ASP.NET 5 


To install ASP.NET on OS X, you can use brew, http://brew.sh/ . Type these commands to 
install ASP.NET 5. 

1 $ brew tap aspnet/dnx 
$ brew update 
$ brew install dnvm 


# # £ agusk — git-remote-http — 80x24 

agusk$ brew tap aspnet/dnx 

==> Tapping aspnet/dnx 

Cloning into '/usr/local/Library/Taps/aspnet/homebrew-dnx'... 
remote: Counting objects: 103, done. 

remote: Total 103 (delta 0), reused 0 (delta 0), pack-reused 103 
Receiving objects: 100% (103/103), 16.83 KiB | 0 bytes/s, done. 
Resolving deltas: 100% (52/52), done. 

Checking connectivity... done. 

Tapped 2 formulae (27 files, 128K) 
agusk$ brew update 

I 




If success, you can see a task which you should do. We must add dnvm on our profile. 











• 1 ■ • {£ agusk — bash — 80x24 

==> Pouring mono-4.0,1.yosemite.bottle.tar.gz 
==> Caveats 

To use the assemblies from other formulae you need to set: 
export M0N0_GAC_PREFIX="/usr/local" 

==> Summary 

HP /usr/local/Cellar/mono/4.0.1: 1004 files, 178M 

==> Installing dnvm 

==> Cloning https://github.com/aspnet/Home.git 

Cloning into '/Library/Caches/Homebrew/dnvm—git'... 

remote: Counting objects: 50, done. 

remote: Compressing objects: 100% (41/41), done. 

remote: Total 50 (delta 10), reused 28 (delta 3), pack-reused 0 

Unpacking objects: 100% (50/50), done. 

Checking connectivity... done. 

==> Checking out branch dev 

==> bash -c 'source /usr/local/Cellar/dnvm/1.0.8-dev/libexec/dnvm.sh; dnvm upgra 
==> Caveats 

Add the following to the ~/.bash_profile, ~/.bashrc or ~/.zshrc file: 
source dnvm.sh 


==> Summary 

tH> /usr/local/Cellar/dnvm/1.0.0-dev: 4 files, 56K, built in 56 seconds 
agusk$ 



Type this command. 

| $ nano -/.bash profile 


Then, you get nano editor. You can use another text editor. Add this script on 
~/.bash_profile. 

| source~dnvm.sh 











# # • 


agusk — nano — 80x24 


GNU nano 2.0.6 


source dnvm.sh| 


Files /Users/agusk/.bash profile 


Modified 


[ New File ] 


3 Get Help 
S Exit 


WriteOut 

Justify 


Read File 
Where Is 


S Prev Page Q 
Next Page 


3 Cut Text 
UnCut Text 


Cur Pos 
To Spell 


If done, save this file. After that, close your Terminal and then open again so Terminal will 
load profile script. 


The next step is to upgrade. Type this command. 
| $ dnvm upgrade 







• ■ • {£ agusk — bash — 80x24 

agusk$ dnvm upgrade 
Determining latest version 
Latest version is 1.0.0-beta4 

dnx-mono.1.0.0-beta4 already installed. 

Adding /Users/agusk/.dnx/runtimes/dnx-mono.1.0.0-beta4/bin to process PATH 

Updating alias 'default' to 'dnx-mono.1.0.0-beta4' 

agusk$ 



Now you already installed dnvm. It will be used to manage ASP.NET 5 runtime on OS X. 
You can verify dnvm by typing this command. 

| $ dnvm help 


So you see a list of dnvm parameter. 






# • & agusk — bash — 80x24 

agusk$ dnvm help 


/ _ \/ 1/ / I / / 1/ / 

/ // / /| I/ / /I_/ / 

/ _ /_/ | _/ | _ /_/ /_/ 

.NET Version Manager - Version 1.0.0-beta5-10375 
By Microsoft Open Technologies, Inc. 

DNVM can be used to download versions of the .NET Execution Environment and mat 
ge which version you are using. 

You can control the URL of the stable and unstable channel by setting the DNX_F 
ED and DNX UNSTABLE FEED variables. 


Current feed settings: 

Default Stable: https://www.nuget.org/api/v2 

Default Unstable: https://www.myget.0rg/F/aspnetvnext/api/v2 

Current Stable Override: <none> 

Current Unstable Override: <none> 


USAGE: dnvm <command> [options] 

dnvm upgrade [-f|-force] [-u|-unstable] 

install latest DNX from feed 


You can also see a list of your DNX runtime by typing this command. 
| $ dnvm list 









£ agusk — bash — 80x24 


dnvm alias <alias> 

display value of the specified alias 

dnvm alias <alias> <semver>|<alias>|<package> 

<alias> the name of the alias to set 

<semver>|<alias>|<package> the DNX version to set the alias to. Alternativel 
y use the version of the specified alias 

dnvm unalias <alias> 

remove the specified alias 

dnvm [help|—h|—help|—help] 

displays this help text. 

dnvm update-self 

updates dnvm itself. 
agusk$ dnvm list 

Active Version Runtime Arch Location Alias 


* 1.0.0-beta4 mono ~/.dnx/runtimes default 


agusk$ 









2.3 Testing 


To test our ASP.NET 5, we use code samples from https://github.com/aspnet/Home . We 
clone this code samples and then restore all required libraries using dnu command. 

Type these commands. 

1 $ git clone https://github.com/aspnet/Home 
$ cd Home 
$ dnu restore 

If you don’t git on your OS X, you can install it via brew. 

| $ brew install git 


• • • 

r i home — bash — 80x24 

CACHE 


Restore complete 


CACHE 


CACHE 


CACHE 


CACHE 


CACHE 


Restore complete 


agusk$ 



Now you are ready to run code samples. 


2.3.1 ASP.NET Console 

To run ASP.NET Console, we can use dnx. Firstly, navigate to ConsoleApp project. 
Type these commands. 











1 $ cd samples/latest/ConsoleApp/ 
$ dnx . run . 


If success, you can see a message “Hello World” on Terminal. 


• • • 

ConsoleApp — bash 

- 80x24 

Restore complete 

agusk$ Is 

CONTRIBUTING.md 

README.md 

dnvminstall.psl 

GettingStartedDeb.md 

dnvm.cmd 

dnvminstall.sh 

Home.sin 

dnvm.psl 

samples 

LICENSE.txt 

dnvm.sh 


agusk$ cd samples/ 
agusk$ Is 

1.0.0-beta4 latest 

agusk$ cd lates 

-bash: cd: lates: No such file or directory 


agusk$ cd latest 
agusk$ Is 

ConsoleApp HelloMvc 

HelloWeb 

NuGet.Config 

agusk$ cd ConsoleApp/ 
agusk$ Is 

ConsoleApp.xproj 

project.json 


Program.es 

proj ect.lock.j son 


aguskS dnx . run . 

Hello World 
agusk$ 




2.3.2 ASP.NET 5 

To run ASP.NET 5 app, we can use dnx with kestrel. Firstly, navigate to HelloWeb project. 

Type these commands. 

1 $ cd samples/latest/HelloWeb/ 

$ dnx . kestrel 


Now open a browser and then navigate to http ://localhost: 5004/. You should see 
ASP.NET 5 app. 










To stop kestrel, you can type exit. 
| exit 


HelloMvc — bash — 80x24 


aguskS cd ConsoleApp/ 
aguskS Is 
ConsoleApp.xproj 
Program.es 
aguskS dnx . run . 

Hello World 
aguskS Is 
ConsoleApp.xproj 
Program.es 
agusk$ cd .. 
aguskS Is 

ConsoleApp HelloMvc 

agusk$ cd HelloWeb/ 
agusk$ dnx . kestrel 
Started 
exit 

aguskS cd .. 
agusk$ Is 

ConsoleApp HelloMvc 

agusk$ cd HelloMvc/ 

agusk$ dnx . kestrel 

Started 

exit 

aguskS 


proj ect.j son 
proj ect.lock.j son 


project.json 
proj ect.lock.j son 


HelloWeb 


NuGet.Config 


HelloWeb 


NuGet.Config 










2.3.3 ASP.NET MVC 


To run ASP.NET MVC, we can use dnx. Firstly, navigate to HelloMvc project. 

Type these commands. 

1 $ cd samples/latest/HelloMvc/ 

$ dnx . kestrel 


Now open a browser and then navigate to http://localhost:5004/. You should see 
ASP.NET MVC app. 


• • • < n 


Home 


localhost 


c 


di_ jO nr 


ASP.NET 

ASP.NET is a free web framework for building great Web sites and 
Web applications using HTML, CSS and JavaScript. 


Learn more » 


Hello My name! 


My address 

© 2015 - My ASP.NET Application 


To stop kestrel, you can type exit. 










HelloMvc — bash — 80x24 


agusk$ cd ConsoleApp/ 
aguskS Is 
ConsoleApp.xproj 
Prog ram.cs 
agusk$ dnx . run . 

Hello World 
agusk$ Is 
ConsoleApp.xproj 
Program.es 
aguskS cd .. 
agusk$ Is 

ConsoleApp HelloMvc 

agusk$ cd HelloWeb/ 
agusk$ dnx . kestrel 
Started 
exit 

agusk$ cd .. 
aguskS Is 

ConsoleApp HelloMvc 

agusk$ cd HelloMvc/ 

aguskS dnx . kestrel 

Started 

exit 

aguskS 


project.json 
proj ect.lock.j son 


project.json 
project.lock.json 


HelloWeb 


NuGet.Config 


HelloWeb 


NuGet.Config 





2.4 Development Tools 


The next step is to build program. To write a program, you can use any text editor. 
Microsoft also provides Visual Studio Code. It runs on Windows, Linux and Mac. You can 
download it on https://code.visualstudio.com/ . 
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3 Deploying ASP.NET 5 on Linux 


In this chapter we will learn how to deploy ASP.NET 5 on Linux. 



3.1 Getting Started 


In this section we start to deploy ASP.NET 5 on Linux. In this book I use ASP.NET 5 
preview, beta4. For illustration, I use Ubuntu 15.04 as Linux distro. Please follow 
installation steps on next section. 



3.2 Deploying ASP.NET 5 


This installation process is based on this 

documentation, https://github.com/aspnet/Home/blob/dev/GettingStartedDeb.md . In this 
section, we install ASP.NET 5 on Linux manually (without docker). Firstly, you update 
your distro. 

| $ sudo apt-get update 


In general, to install ASP.NET 5 on Ubuntu, you can do the following steps: 

• Installing Mono 

• Installing libuv 

• Installing DNVM 

• Installing git (optional) 


3.2.1 Installing Mono 


Mono is .NET runtime for Linux. You need the latest version of Mono runtime. To install 
it, you can type these commands. 

1 $ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E032 
$ echo "deb http://download.mono-project.com/repo/debian wheezy main" 

$ sudo apt-get update 
$ sudo apt-get install mono-complete 


If finished, you can verify it by checking its version. 
| $ mono --version 












f' 1 '©© agusk@ubuntu15: ~ 

agusk@ubuntul5:~$ mono --version 

Mono JIT compiler version 4.0.1 (tarball Tue May 12 15:39:23 UTC 2015) 

Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors, www.mono-proj 
ect.com 

TLS: thread 

SIGSEGV: altstack 

Notifications: epoll 

Architecture: amd64 

Disabled: none 

Misc: softdebug 

LLVM: supported, not enabled. 

GC: sgen 

agusk@ubuntul5:~$ | 


3.2.2 Installing libuv 


Libuv is a multi-platform asynchronous 10 library that is used by the KestrelHttpServer 
that we will use to host our web applications. 

Type these commands to install libuv library. 

$ sudo apt-get install automake libtool curl 

$ curl -sSL https://github.eom/libuv/libuv/archive/vl.4.2.tar.gz | sudo 
$ cd /usr/local/src/libuv-1.4.2 
$ sudo sh autogen.sh 
$ sudo ./configure 
$ sudo make 
$ sudo make install 

$ sudo rm -rf /usr/local/src/libuv-1.4.2 && cd -/ 

$ sudo ldconfig 




agusk@>ubuntu15: ~ 

in a given directory, LIBDIR, you must either use libtool, and 
specify the full pathname of the library, or use the '-LLIBDIR' 
flag during linking and do at least one of the following: 

- add LIBDIR to the *LD_LIBRARY_PATH' environment variable 

during execution I 

- add LIBDIR to the *LDRUNPATH' environment variable 
during linking 

- use the '-Wl,-rpath -Wl,LIBDIR' linker flag 

- have your system administrator add LIBDIR to ‘/etc/ld.so.conf' 

See any operating system documentation about shared libraries for 
more information, such as the ld(l) and ld.so(8) manual pages. 


/bin/mkdir -p '/usT/XocaX/i-nclude’ 

/usr/bin/install -c -m 644 include/uv.h include/uv-errno.h include/uv-threadpoo 
l.h include/uv-version.h include/uv-unix.h include/uv-linux.h ’/usr/XocaX/lnclud 
e' 

/bin/mkdir -p '/usr/local/lib/pkgconfig' 

/usr/bin/install -c -m 644 libuv.pc '/usr/local/lib/pkgconfig' 
make[l]: Leaving directory ’/usr/XocaX/src/Xxbuv-1.4.2' 

agusk@ubuntul5:/usr/local/src/libuv-1.4.2$ sudo rm -rf /usr/local/src/libuv-1.4. 
2 && cd -/ 

agusk@ubuntul5:~$ sudo Idconfig 

agusk@ubuntu!5:~$_ 


3.2.3 Installing DNVM 


The last step is to install DNVM. Type this command. 


$ curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstal 


If success, you can see a task which you should do. We must add dnvm on our profile. 


agusk@ubuntu15: ~ 

agusk@ubuntul5:~$ curl -sSL https://raw.githubusercontent.eom/aspnet/Home/d e^/dn 
vminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh 
Downloading dnvm as script to '/home/agusk/.dnx/dnvm' 

Appending source string to /home/agusk/.bashre 

Type 'source /home/agusk/.dnx/dnvm/dnvm.sh' to start using dnvm 

agusk@ubuntu!5:~$ 


Type this command. 

| $ nano /home/<account>/.bashre 


Please change <account> by your Linux login account. 












Then, you get nano editor. You also edit this file using gedit or other text editor. Add this 
script on .bashrc file into your profile, for instance, /home/<account>/.bashrc . 

Then, type this script. 

| source~/home/<account>/.dnx/dnvm/dnvm.sh 


Please change <account> by your Linux login account. 

If done, save this file. After that, close your Terminal and then open again so Terminal will 
load profile script. 

The next step is to upgrade. Type this command. 


$ dnvm upgrade 


agusk@ubuntu15: ~ 

agusk@ubuntul5:~$ dnvm upgrade 
Determining latest version 
Latest version is .0.0 beta4 

Downloading dnx-mono.1.0.0-beta4 from https://www.nuget.org/api/v2 
Download: https://www.nuget.org/api/v2/package/dnx-mono/l.0.0-beta4 
######################################################################## 100 , 0 * 
Installing to /home/agusk/.dnx/runtimes/dnx-mono.1.0.0-beta4 
Adding /home/agusk/.dnx/runtimes/dnx-mono.1.0.0-beta4/bin to process PATH 
Setting alias 'default' to 'dnx-mono.1.0.0-beta4' 
agusk@ubuntul5:~$ 


Now you already installed dnvm. It will be used to manage ASP.NET 5 runtime on Linux. 
You can verify dnvm by typing this command. 

| $ dnvm help 


So you see a list of dnvm parameter. 













agusk(®ubuntu15: ~ 

agusk@ubuntul5:~$ dnvm upgrade 
Determining latest version 
Latest version is i.0.6 beta4 

Downloading dnx-mono.1.0.0-beta4 from https://www.nuget.org/api/v2 

Download: https://www.nuget.org/api/v2/package/dnx-mono/1.0.0-beta4 

tf####################################################################### 100,0% 

Installing to /home/agusk/.dnx/runtimes/dnx-mono.1.0.0-beta4 

adding /home/agusk/.dnx/runtimes/dnx-mono.1.0.0-beta4/bin to process PATH 

Setting alias 'default' to 'dnx-mono.1.0.0-beta4' 

agusk@ubuntul5:~$ dnvm help 

/T\/”i/Ti / / \/~1 
i n i /ii// /1_/ / 

/_/_/!_/ I_/_/ /_/ 

.NET Version Manager - Version 1.0.0-beta6-10381 
3y Microsoft Open Technologies, Inc. 

DNVM can be used to download versions of the .NET Execution Environment and mana 
ge which version you are using. 

you can control the URL of the stable and unstable channel by setting the DNX_FE 
ED and DNX_UNSTABLE_FEED variables. 

Current feed settings: 


You can also see a list of your DNX runtime by typing this command. 
| $ dnvm list 


agusk(®ubuntu15: ~ 

dnvm alias <alias> 

display value of the specified alias 

dnvm alias <alias> <semver>|<alias>|<package> 

<alias> the name of the alias to set 

<semver>|<alias>|<package> the DNX version to set the alias to. Alternativel 
y use the version of the specified alias 

dnvm unalias <alias> 

remove the specified alias 

dnvm [help|-h|-help|--help] 

displays this help text. 

dnvm update-self 

updates dnvm itself. 
agusk@ubuntul5:~$ dnvm list 

Active Version Runtime Arch Location Alias 


* 1.0.0-beta4 mono -/.dnx/runtimes default 

agusk@ubuntul5:~$ | 



















3.2.4 Installing git 


This task is optional but I recommend to install it because we want to run the sample app 
from https://github.com/aspnet/Home . 

Type this command to install git. 

| $ sudo apt-get install git 


agusk@ubuntu15: ~ 

agusk@ubuntul5:~$ sudo apt-get install git 
[sudo] password for agusk: 

Reading package lists... Done 

Building dependency tree 

Reading state information... Done 

The following extra packages will be installed: 

git-man liberror-perl 
Suggested packages: 

git-daemon-run git-daemon-sysvinit git-doc git-el git-email git-gui gitk 
gitweb git-arch git-cvs git-mediawiki git-svn 
The following NEW packages will be installed: 
git git-man liberror-perl 

0 upgraded, 3 newly installed, 0 to remove and 0 not upgraded. 

Need to get 3.517 kB of archives. 

After this operation, 22,7 MB of additional disk space will be used. 

Do you want to continue? [Y/n] 







3.3 Testing 


To test our ASP.NET 5, we use code samples from https://github.com/aspnet/Home . We 
clone this code samples and then restore all required libraries using dnu command. 

Type these commands. 

1 $ git clone https://github.com/aspnet/Home 
$ cd Home 
$ dnu restore 


agusk(®ubuntu15: ~/books/aspnet/home 

ver.IIS' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Ser 
ver.WebListener’ 

Writing lock file /home/agusk/books/aspnet/home/samples/latest/HelloMvc/project. 
lock.json 

Restore complete, 1246ms elapsed 

Restoring packages for /home/agusk/books/aspnet/home/samples/latest/HelloWeb/pro 
ject.json 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Kestrel' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Dia 
gnostics' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Hos 
ting' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Ser 
ver.IIS' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id=’Microsoft.AspNet.Ser 
ver.WebListener' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Sta 
ticFiles' 

Writing lock file /home/agusk/books/aspnet/home/samples/latest/HelloWeb/project. 
lock.json 

Restore complete, 595ms elapsed 

Total time 284006ms I 

agusk@ubuntul5:~/books/aspnet/home$_I 


Now you are ready to run code samples. 


3.3.1 ASP.NET Console 


To run ASP.NET Console, we can use dnx. Firstly, navigate to ConsoleApp project. 

Type these commands. 

1 $ cd samples/latest/ConsoleApp/ 

$ dnx . run . 


If success, you can see a message “Hello World” on Terminal. 










agusk@ubuntu15: ~/books/aspnet/home/samples/latest/ConsoleApp 

agusk@ubuntul5:~/books/aspnet/home$ Is 

CONTRIBUTING.md dnvminstall.sh GettingStartedDeb.md README.md 
dnvm.cmd dnvm.psl Hone.sin samples 

dnvminstall.psl dnvm.sh LICENSE.txt 

agusk@ubuntul5:~/books/aspnet/home$ cd sanples/latest/ConsoleApp/ 
agusk@ubuntul5:~/books/aspnet/home/samples/latest/ConsoleApp$ dnx . run . 
Hello World 

agusk@ubuntu!5:~/books/aspnet/home/samples/latest/ConsoleApp$ 


3.3.2 ASP.NET 5 

To run ASP.NET 5 app, we can use dnx with kestrel. Firstly, navigate to HelloWeb project. 

Type these commands. 

1 $ cd samples/latest/HelloWeb/ 

$ dnx . kestrel 


agusk(ffiubuntu15: ~/books/aspnet/home/samples/latest/HelloWeb 

agusk@ubuntul5:~/books/aspnet/home/samples/latest/HelloWeb$ Is 
HelloWeb.xproj project.lock.json Startup.es 
project.json Properties wwwroot 

agusk@ubuntul5:~/books/aspnet/hone/sanples/latest/HelloWeb$ dnx . kestrel 
Started 


Now open a browser and then navigate to http ://localhost: 5004/. You should see 
ASP.NET 5 app. 







To stop kestrel, you can type exit, 
j exit 


3.3.3 ASP.NET MVC 


To run ASP.NET MVC, we can use dnx. Firstly, navigate to HelloMvc project. 

Type these commands. 

1 $ cd samples/latest/HelloMvc/ 

$ dnx . kestrel 












agusk@)ubuntu15: ~/books/aspnet/home/samples/latest/HelloMvc 

agusk@ubuntul5:~/books/aspnet/home/samples/latest/HelloMvc$ Is 
Controllers Models project.lock.json Startup.es wwwroot 

HelloMvc.xproj project.json Properties Views 

agusk@ubuntul5:~/books/aspnet/home/samples/latest/HelloMvc$ dnx . kestrel 
Started 


Now open a browser and then navigate to http ://localhost: 5004/. You should see 
ASP.NET MVC app. 



ASP.NE1 


ASP.NET is a free web framework for building great Web sites and Web applications 
using HTML, CSS and JavaScript. 

mm—m h 


Hello My name! 


My address 

02015 ■ My ASP NET Application 


To stop kestrel, you can type exit. 







3.4 Development Tools 


The next step is to build program. To write a program, you can use any text editor. 
Microsoft also provides Visual Studio Code. It runs on Windows, Linux and Mac. You can 
download it on https://code.visualstudio.com/ . 


Untltled-1 - Visual Studio Code 

Untitled-1 


0 


P 

o 


m X Welcome X 


Hello, welcome to Visual Studio Code! 

Here are (our things you should know before gening started: 


Quick Open 

Find a file or symbol with Ctrl+O To see your 
navigation history, use Ctrl+Tab 


Side by side editing 

View files side-by-side using Ctrl+Click on 
the file name. You can also find this 
command on the editor toolbar. 


Organize files 

Use Working Files to organize your work To 
add to the set. either make an edit or double¬ 
click the file name. 


Command palette 

You can browse through all the commands 

with Ctrl+Shift+P 


Now. to get started, open a folder with File > Open... 

If you dom have an existing protect, we suggest using Yeoman to 
scaffold out a new one. 


'CM 

default 



>Change 

Cnanqt Language Mot 


GETTING STARTED 


O 
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4 Deploying ASP.NET 5 on Windows 


In this chapter we will learn how to deploy ASP.NET 5 on Windows. 



4.1 Getting Started 


In this section we start to deploy ASP.NET 5 on Windows. In this book I use ASP.NET 5 
preview, beta4. For illustration, I use Windows 8.1. Please follow installation steps on next 
section. 



4.2 Deploying ASP.NET 5 


This installation process is based on this documentation, 

https://github.com/aspnet/Home/blob/dev/GettingStartedDeb.md . In this section, we 
install ASP.NET 5 on Windows. Firstly, you update your Windows. 

In general, to install ASP.NET 5 on Ubuntu, you can do the following steps: 

• Installing .NET 

• Installing DNVM 

• Installing git (optional) 


4.2.1 Installing .NET 

You need the latest version of .NET Framework runtime. To install it, you can download it 
on https://www.microsoft.com/net . 


4.2.2 Installing DNVM 

You can install DNVM via Command Prompt. Open CMD and type this command. 

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{$Branch 


133 Command Prompt 

Microsoft Windows [Uersion 6.3.9600] a 

(c) 2013 Microsoft Corporation. All rights reserved. 

C:\Users\Agus>@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{$ 
Branch= 1 deu';iex ((new-object net.webclient).Downloadstring(‘https://raw.githubu 
sercontent.com/aspnet/Home/deu/dnvminstall.psl ')))" 

Using temporary directory: C:\Users\Agus\AppData\Local\Temp\dnuminstall 
Downloading DNUM.psI to 
Downloading DNUM.cmd to 
Installing DNUM 

Installing .NET Uersion Manager to C:\Users\Agus\.dnx\bin 
Creating destination folder ‘C:\Users\Agus\.dnx\bin‘ ... 

Installing ‘dnum.psl 1 to 'C:\Users\Agus\.dnx\bin' ... 

Installing ‘dnum.cmd' to 'C:\Users\Agus\.dnx\bin‘ ... 

Adding C:\Users\Agus\.dnx\bin to Process PATH 
Adding C:\Users\Agus\.dnx\bin to User PATH 
Adding C:\Users\Agus\.dnx to Process DNX_HOME 
Adding C:\Users\Agus\.dnx to User DNX_HOME 

C:\Users\Agus>_ 


x 










If success, you can verify where dnvm is by typing this command, 
where dnvm 


Command Prompt 


_ n 


Microsoft Windows [Uersion 6.3.9600] 

(c) 2013 Microsoft Corporation. All rights reserved. 

C:\Users\Agus>where dnvm 
C:\Users\Agus\.dnx\bin\dnvm.cmd 

C: \Users\Agus> 1- 


If got error, check your PATH configuration. Make sure .dnx path already added. 

System Properties 


Computer N 


You mus 
Perform 
Visual 


User Prc 
Deskto 


Startup c 
Systerr 


Environment Variables 


User variables for Agus 



1.. 

r 

VUMUUIC - 

— VUIUC - 

n 


|dnx home 

%USERPROFHE%\.dnx 


I— - 

T0PA1H - 

u:\Pb PKtss\etiook\arduino go\codes 

—1 


GOROOT 

C:\Go\ 



MOZ_PLUGIN_PA... 

C:\Program Files (x86)\Foxit Software\... 

V 





New... Edit... Delete 


System variables 




Variable 

Value 

A 


ANDROID_HOME 

C:\Android\android-sdk 



ANDROID_NDK_... 

C:\Users\Agus\Documents\Android\ndk... 



ANT_HOME 

C:\ant\apache-ant-l.9.3 



a si. log 

Destination=file 

V 






New... 


Edit... 


OK 


Delete 


Cancel 








































The next step is to upgrade DNVM. Type this command. 
| $ dnvm upgrade 


Hi Command Prompt — 

D:\Temp>dnum upgrade 
Determining latest uersion 

Downloading dnx-clr-win-x8G.1.0.0-beta4 from https://www.nuget.org/api/u2 
Installing to C:\Users\Agus\.dnx\runtimes\dnx-clr-win-x86.1.0.0-beta4 
Adding C:\Users\Agus\.dnx\runtimes\dnx-clr-win-x86.1.0.0-beta4\bin to process PA 
TH 

Adding C:\Users\Agus\.dnx\runtimes\dnx-clr-win-x86.1.0.0-beta4\bin to user PATH 
Natiue image generation (ngen) is skipped. Include -Ngen switch to turn on natiu 
e image generation to improue application startup time. 

Setting alias 'default' to ‘dnx-clr-win-x86.1.0.0-beta4' 

D:\Temp>_ 


x 


V 


Now you already installed dnvm. It will be used to manage ASP.NET 5 runtime on 
Windows. You can verify dnvm by typing this command. 

| $ dnvm help 


So you see a list of dnvm parameter. 


m Windows PowerShell 

D:\Temp>dnum help 


.NET Uersion Manager ul .0.0-beta6-10381 
By Microsoft Open Technologies, Inc. 

dnum <command> <c • c? ..> 


https://www.nuget,org/api/u2 

https://www.myget.org/F/aspnetunext/api/u2 
<none> 

<none> 



You can also see a list of your DNX runtime by typing this command. 
| $ dnvm list 



















Command Prompt 


update-self Updates DNUM to the latest uersion. a 

upgrade Installs the latest uersion of the runtime and reassigns the 

specified alias to point at it 

use Adds a runtime to the PATH enuironment uariable for your cur 

rent shell 

D:\Temp>dnum list 

Actiue Uersion Runtime Architecture Location Alias 

* 1.0.0-betaH clr x8S C:\Users\Agus\.dnx\runtimes default 


D: \Temp>. 


4.2.3 Installing git 

This task is optional but I recommend to install it because we want to run the sample app 
from https://github.com/aspnet/Home . You can install git by downloading it on https://git- 
scm.com/downloads . 
















4.3 Testing 


To test our ASP.NET 5, we use code samples from https://github.com/aspnet/Home . We 
clone this code samples and then restore all required libraries using dnu command. 

Type these commands. 

1 $ git clone https://github.com/aspnet/Home 
$ cd Home 
$ dnu restore 


Command Prompt 


n 


X 


D:\Temp>git clone https://github.com/aspnet/Home 

Cloning into 'Home'... 

remote: Counting objects: 1170, done. 

remote: Compressing objects: 100% (12/12), done. 

rRemote: Total 1170 (delta 5), reused 0 (delta 0), pack-reused 1158 
Receiving objects: 76% (890/1170), 652.01 KiB I 299.00 KiB/s 
Receiuing objects: 100% (1170/1170), 723.73 KiB I 299.00 KiB/s, done. 
Resoluing deltas: 100% (679/679), done. 

Checking connectivity... done. 

D:\Temp> 


Command Prompt 



CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet .Dia a 
gnostics' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Hos 
ting' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Ser 
ver.IIS' 

CACHE https://www.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Ser 
ver.UebListener' 

CACHE https://uwu.nuget.org/api/v2/FindPackagesById()?Id='Microsoft.AspNet.Sta 
ticFiles' 

Writing lock file 

jRestore complete, 721ms elapsed 
Total time 131416ms 

D:\Temp\Home> v 


Now you are ready to run code samples. 


4.3.1 ASP.NET Console 















To run ASP.NET Console, we can use dnx. Firstly, navigate to ConsoleApp project. 
Type these commands. 


I 


$ cd samples/latest/ConsoleApp/ 
$ dnx . run . 


If success, you can see a message “Hello World” on Terminal. 


Command Prompt 


n 



uer.IIS' 


A 


CACHE https://www.nuget.org/api/u2/FindPackagesById()?Id=‘Microsoft.AspNet.Ser 
uer.WebListener' 

CACHE https://www.nuget.org/api/u2/FindPackagesById()?Id='Microsoft.AspNet.Sta 
ticFiles' 

Writing lock file 

Restore complete, 721ms elapsed 
Total time 131416ms 

D:\Temp\Home>cd samples/latest/ConsoleApp/ 

D:\Temp\Home\samples\latest\ConsoleApp>dnx . run . 

Hello World 

D:\Temp\Home\samples\latest\ConsoleApp> v 


4.3.2 ASP.NET 5 


To run ASP.NET 5 app, we can use dnx with kestrel. Firstly, navigate to HelloWeb project. 
Type these commands. 

1 $ cd samples/latest/HelloWeb/ 

$ dnx . kestrel I 















ess Command Prompt 

D:\Temp\Home>cd samples/latest/ConsoleApp/ 

D:\Temp\Home\samples\latest\ConsoleApp>dnx . run . 
Hello World 

D:\Temp\Home\samples\latest\ConsoleApp>cd .. 

D: \Temp\Home\samples\latest>cd Helloldeb 

D:\Temp\Home\samples\latest\HelloWeb>dnx . kestrel 

Started 

exit 

D: \Temp\Home\samples\latest\HelloliJeb> 



V 


When you run these commands, you may get a security confirmation. Please click Allow 
access button to give a security permission. 



Now open a browser and then navigate to http://localhost:5004/. You should see 
ASP.NET 5 app. 
















To stop kestrel, you can type exit. 
| exit 


4.3.3 ASP.NET MVC 


To run ASP.NET MVC, we can use dnx. Firstly, navigate to HelloMvc project. 

Type these commands. 

1 $ cd samples/latest/HelloMvc/ 

$ dnx . kestrel 






















Command Prompt 


n 



A 


D:\Temp\Home>cd samples/latest/ConsoleApp/ 

D:\Temp\Home\samples\latest\ConsoleApp>dnx . run . 

Hello World 

D: \Temp\Home\saitiples\latest\ConsoleApp>cd .. 

D:\Temp\Home\samples\latest>cd HelloUeb 

D:\Temp\Home\samples\latest\HelloWeb>dnx . kestrel 

Started 

exit 

D:\Temp\Home\samples\latest\HelloWeb> v 


Now open a browser and then navigate to http ://localhost: 5004/. You should see 
ASP.NET MVC app. 



n 


Command Prompt 


D:\Temp\Home\samples\latest\ConsoleApp>cd .. 


A 


D:\Temp\Home\samples\latest>cd HelloUeb 

D:\Temp\Home\samples\latest\HelloWeb>dnx . kestrel 

Started 

exit 

D:\Temp\Home\samples\latest\HelloWeb>cd .. 

D:\Temp\Home\samples\latest>cd HelloMuc 

D:\Temp\Home\samples\latest\HelloMuc>dnx . kestrel 

Started 

exit 


To stop kestrel, you can type exit. 










4.4 Development Tools 


The next step is to build program. To write a program, you can use any text editor. 
Microsoft also provides Visual Studio Code. It runs on Windows, Linux and Mac. You can 
download it on https://code.visualstudio.com/ . 










5. ASP.NET 5 Development 


In this chapter I’m going to explain how to work with ASP.NET 5 development. 



5.1 Getting Started 


In this chapter, we learn how to write a program for ASP.NET 5 from scratch. We use two 
scenarios, ASP.NET 5 Console and ASP.NET 5 MVC, for illustrating. 



5.2 Building ASP.NET 5 Console Application 


In this case, we build a simple program for ASP.NET 5 Console. We implement Math 
operation using Math class. 


5.2.1 Creating A Project 


To create a project, we can create a folder, called ConsoleDemo. In Linux/OS X, you can 
type this command on Terminal. 

mkdir ConsoleDemo 


Furthermore, we create a file, project.json. Type this script. 


"dependencies": { 

}, 

"commands": { 

"ConsoleApp" : "ConsoleDemo" 

}, 

"frameworks": { 

"dnx451" : { }, 

"dnxcore50" : { 

"dependencies": { 

"System.Console" : "4.0.0-beta-*" 

} 

} 

} 

} 


This file is a project configuration which uses ASP.NET 5 DNX. 


5.2.2 Writing Program 

To create a program, we create a class, SimpleMath. Create a file, called SimpleMath.es. 
Then, write this code. 

I using System; 

public class SimpleMath 
public SimpleMath (){} 








public double Add (double a, double b) 

{ 

return a + b; 

} 

public void DemoMath( double a, double b) 

{ 

Console .Writel_ine( "cos({0}) = {1}", a, 
Console.WriteLine("sin({0}) = {1}", b, 
Console.WriteLine("exp({0}) = {1}", a, 

} 


Math.Cos(a)); 
Math.Sin(b)); 
Math.Exp(a)); 


The next step is to create a main program. Create a file, Program.es, and write this code, 
using System; 

public class Program 

{ 

public static void Main() 

{ 

Console.WriteLine("===Demo Simple Math==="); 
double a = 0.2; 
double b = 3.5; 

SimpleMath o = new SimpleMath(); 
double result = o.Add(a,b); 

Console.WriteLine("{0} + {1} = {2}", a, b, result); 
o.DemoMath(a,b); 

Console.WriteLine("Done"); 

} 

} 


Save all files. 

The following is our project structure. 


J CODES 


* CorrsoleDemo 


Program.es 

projection 

SimpleMath.es 


5.2.3 Testing 






Now you can test the program. Firstly, we load all required libraries using dnu. Then, we 
execute the program using dnx. 

I dnu restore 
dnx . run . 


If success, you can see the program output. 


# • # ConsoleDemo — bash — 80x19 

agusk$ Is 

Progratn.es project.json 

SimpleMath.es project.lock.json 

aguskS dnu restore 
Restoring packages for 

CACHE 


Restore complete 

agusk$ dnx . run . 

===Demo Simple Math=== 

0.2 + 3.5 = 3.7 

cos(0.2) = 0.980066577841242 

sin(3.5) = -0.35078322768962 

exp(0.2) = 1.22140275816017 

Done 

aguskS 






5.3 Building ASP.NET 5 MVC Application 

The second demo is to build ASP.NET 5 MVC application. We develop a simple entry 
form and utilize ASP.NET MVC session. The following is our scenario: 

• User fills a form to create a new project 

• User clicks Save button to save the data 

• The data will be stored to a session stack 

• Then, the data will be shown in another page 


Let’s start to develop. 


5.3.1 Creating a Project 

Firstly, we create a project by creating a folder, called WebDemo. Then, you create the 
following folder: 

• Controllers 

• Models 

• Properties 

• Views 

• wwwroot 


You can see the project structure on the Figure below. 



* WebOemo 

* Controllers 

HomeController.es 

* Models 

Productcs 

* Properties 

launchSettingsjson 

* Views 

* Home 

Create.cshtml 

Index.cshtml 

Save.cshtml 

* Shared 

_Layoutcshtml 
> www root 
project.Json 
project.lock.json 
Startup.es 


We need project a config file, called project.json, on the project root folder. It consists of 
required libraries. Please write this script for project.json file. 


"version": "1.0.0-*", 

"webroot": "wwwroot", 

"exclude": [ 

"wwwroot" 

L 

"packExclude" : [ 

"**.kproj", 

"**.user", 

"* *.vspscc" 

], 

"dependencies": { 

"Kestrel": "1.0.0-*", 

"Microsoft.AspNet.Diagnostics" : "1.0.0-*", 

"Microsoft.AspNet.Mvc" : "6.0.0-*", 

"Microsoft.AspNet.Server.IIS" : "1.0.0-*", 

"Microsoft.AspNet.Server.WebListener" : "1.0.0-*", 

"Microsoft.AspNet.Session" : "1.0.0-*" 

}, 

"commands": { 

"web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Serve 
"kestrel": "Microsoft.AspNet.Hosting --server Kestrel --server.u 

}, 

"frameworks": { 

"dnx451" : { }, 

"dnxcore50": { } 









App will start by executing Startup.es file. Create this file and write this code. 


using Microsoft.AspNet.Builder ; 

using Microsoft.Framework.Dependencylnjection ; 

namespace WebDemo 

{ 

public class Startup 


{ 


public void ConfigureServices( IServiceCollection services) 

{ 

services.AddMvc(); 

} 

public void Configure( IApplicationBuilder app) 

{ 

// handle error page 

app.UseErrorPage(); 

// handle session 

app.UseInMemorySession(); 

// aspnet routing 

app.UseMvc(routes => 

{ 

routes.MapRoute("default", "{controller=Home}/{action= 

}); 

} 


We also add launchSettings.json to configure how to execute the program. Store it on 
Properties folder. Write this script for launchSettings.json file. 

{ 

"profiles": { 

"IIS Express" : { 

"commandName" : "IISExpress", 

"launchBrowser" : true, 

"environmentVariables" : { 

"ASPNET_ENV" : "Development" 

} 

}, 

"kestrel": { 

"commandName": "kestrel", 

"launchBrowser": true, 

"launchUrl" : "http://localhost:5004" 

}, 

"web": { 








"commandName" : "web", 

"launchBrowser" : true, 

"launchUrl" : "http://localhost:5001" 

} 

} 

} 


5.3.2 Writing Program 


In this section, we write our ASP.NET 5 MVC program. 


5.3.2.1 Creating Model 

A model holds a data. In our case, we create a module, called Product, which consists of 
four properties. Create a file, called Product.cs, and write this code. 

using System.ComponentModel.DataAnnotations ; 

namespace WebDemo.Web.Models 

{ 

public class Product 

{ 

[Required] 

[MinLength(4)] 

[Display( Name = "Name" )] 
public string Name { get; set; } 

[Display( Name = "Product Code" )] 
public string ProductCode { get; set; } 

[Display( Name = "Quantity" )] 
public int Quantity { get; set; } 

[Display( Name = "Is Discount" )] 
public bool IsDiscount { get; set; } 

} 

} 


Save this file into Models folder. 


5.3.2.2 Creating Controller 

Now we create MVC controller, called Home controller. Create a file, called 
HomeControlIer.es, and write this code. 





using System; 

using Microsoft.AspNet.Mvc; 
using Microsoft.AspNet.Http; 
using WebDemo.Web.Models; 

namespace WebDemo.Web.Controllers 

{ 

public class HomeController : Controller 

{ 

public IActionResult Index() 

{ 

return View( ); 

} 

public IActionResult Create() 

{ 

var product = new Product(); 
return View(product) ; 

} 

[HttpPost] 

public IActionResult Create(Product obj) 

{ 

// do database processing 
/////// 

// for testing, save it into a session 

Context.Session.Setstring("name",obj.Name); 

Context.Session.Setstring("code",obj.ProductCode); 

Context.Session.Setlnt("quantity",obj.Quantity); 

Context.Session.Setstring("discount",obj.IsDiscount.ToString 

return RedirectToAction( "Save"); 

} 

public IActionResult Save() 

{ 

var product = new Product(); 

product.Name = Context.Session.GetString("name"); 
product.ProductCode = Context.Session.GetString("code"); 
product.Quantity = (int)Context .Session.Getlnt("quantity") 
product.IsDiscount = Convert.ToBoolean(Context.Session.Gets 

return View(product) ; 


53.2.3 Creating View 



We create three pages: 


• Index.cshtml 

• Create, cshtml 

• Save.cshtml 


We also create a layout, called _Shared.cshtml. Write this script. 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf -8" 


/> 


<meta name="viewport" content="width=device-width, initial-scale=l.0 
<title>@ViewBag.Title - MyASP.NET Application</title> 

<link rel=" stylesheet" href="//netdna .bootstrapcdn.com/bootstrap/3.0 

</head> 

<body> 

<div class="navbar navbar-inverse navbar-fixed-top"> 

<div class="container "> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle" data-toggl(= 
<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

</div> 

<div class="navbar-collapse collapse"> 

<ul class="nav navbar-nav"> 

<li><a href="/">Home</ax/li> 

</ul> 

</div> 

</div> 

</div> 

<div class="container body-content"> 

@RenderBody() 

<footer> 

<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
</footer> 

</div> 

</body> 

</html> 


The following is a script for Index.cshtml file. 

@{ 

Layout = "/Views/Shared/_Layout.cshtml"; 
ViewBag.Title = "Home Page"; 


<div class=" jumbotron"> 









I <hl>ASP.NET MVC Demo</hl> 

<p class="lead"> Filling and submitting a form.</p> 

<pxa href="/Home/Create" class="btn btn-primary btn-large">Create 
</div> 


& 


The following is a script for Create.cshtml file. 

@using WebDemo.Web.Models 
@model Product 
@{ 

Layout = "/Views/Shared/_Layout.cshtml"; 

ViewBag.Title = "Create Product"; 

} 

<div class=" jumbotron"> 

<hl>ASP . NET</hl> 

<p class="lead">Create a new product. Fill this form. Then, click Sa 
</div> 

@using ( Html.BeginForm() ) 

{ 

<fieldset> 

<legend>Create a new Product</legend> 

<div class="editor-label"> 

@Html.LabelFor(model => model.Name) 

</div> 

<div class="editor-field"> 

@Html.TextBoxFor(model => model.Name) 

</div> 

<br/> 

<div class="editor-label"> 

@Html.LabelFor(model => model.ProductCode) 

</div> 

<div class="editor-field"> 

@Html.TextBoxFor( model => model.ProductCode ) 

</div> 

<br/> 

<div class="editor-label"> 

@Html.LabelFor(model => model.Quantity) 

</div> 

<div class="editor-field"> 

@Html.TextBoxFor( model => model.Quantity ) 

</div> 

<br/> 

<div class="editor-label"> 

<div style="float : left;"> 

@Html.CheckBoxFor(model => model.IsDisco 

</div> 

@Html.LabelFor(model => model.IsDiscount) 







</div> 

<br/> 

<input type="submit" value="Save" /> 
</fieldset> 

} 

<pxbr></p> 


The following is a script for Save.cshtml file. 


@model WebDemo.Web.Models.Product 

@{ 

Layout = M /Views/Shared/_Layout.cshtml"; 

ViewBag.Title = "Reading Session"; 

} 

<div class=" jumbotron"> 

<hl>ASP.NET</hl> 

<p class="lead">Reading data from ASP.NET MVC session. </p> 

<pxa href="/Home" class="btn btn-primary btn-large">Back to home 
</div> 

<div> 

<p>Name: @(Model ! = null ? Model.Name : "")</p> 

<p>Product Code: @(Model != null ? Model.ProductCode : "")</p> 
<p>Quantity: @(Model \= null ? Model.Quantity : 0)</p> 

<p>Is discount: @(Model ! = null ? Model.IsDiscount : false)</p> 
</div> 

<pxbrx/p> 


&r 


Save all files and store them into Views folder. See project structure. 


5.3.3 Testing 


Now you are ready to execute. Type these command to load required libraries and execute 
the program. 




dnu restore 
dnx . kestrel 










# • WebDemo — mono-sgen — 80x19 

Restoring packages for 

CACHE 

CACHE 

CACHE 

CACHE 

CACHE 

CACHE 

Restore complete 

agusk$ dnx . kestrel 
Started 


I 



Open a browser and navigate to http://localhost:5004 . Click Create button. 



ASP.NET MVC 
Demo 

Riling and submitting a form. 


Create » 


©2015- My ASP.NET Application 


Fill all fields. If done, click Save button. 











ASP.NET 


Create a new product. Fill this form. Then, click Save button if done. 

Create a new Product 

Name 

product abc 

Product Code 

abc123 

Quantity 

10 

Qls Discount 

Save 

© 2015 - My ASP.NET Application 



Our filled form will be shown in the next page. It uses ASP.NET session to keep our filled 
data. 







ASP.NET 


Reading data from ASRNET MVC session. 


Back to home » 


Name: product abc 
Product Code: abc123 
Quantity: 10 
Is discount: True 

© 2015 - My ASRNET Application 








6. ASP.NET 5 RESTful and Angular JS 


In this chapter I’m going to explain how to work with ASP.NET 5 RESTful and 
Angular JS 



6.1 Getting Started 

In this section, we develop a simple app to work with ASP.NET RESTful and AngularJS. 

AngularJS is an open-source JavaScript framework, maintained by Google, that assists 
with running single-page applications. Further information about AngularJS, you can visit 
official website on http://angularjs.org/ . 

To integrate your application with AngularJS, you can download AngularJS on 
http://code.angularjs.org/ . Choose AngularJS version you want to use. To use AngularJS 
on your web application, you just put it on your web page: 

| <script src-"lib/angular . min . j s"x/script> 

This means AngularJS file will be downloaded from your local. You also can put 
AngularJS as follows. 

| <script src="https://aj ax.googleapis.com/aj ax/libs/angularj s/1.2.15/angu 


The following is our scenario: 

• User click a button 

• Program will request data from server via RESTful 


Let’s start to develop. 









6.2 Creating Project 


Firstly, we create a project by creating a folder, called RESTfuldemo. After that, you can 
create the following folder: 

• Controllers 

• Database 

• Models 

• Properties 

• Views 

• wwwroot 


The following is project structure. 


•* HfcSIfulDemo 
a Controllers 

HomeController.es 
a Database 

DiffnpDatabase.es 
a Models 
Product cs 
> Properties 
a Views 
a Home 

Index.cshtml 
a Shared 

_Layout.cshtml 
a wwwroot 
> css 
"is 
' lb 

angular.min.js 
angular.min.js.map 
a services 

productservice.js 
angular.min.js 
project json 
project, lock, json 
Startup.es 


We need project config file, called project.json, on the project root folder. It consists of 
required libraries. Please write this script for project.json file. 





"version": "1.0.0-*", 

"webroot": "wwwroot", 

"exclude": [ 

"wwwroot" 

], 

"packExclude" : [ 

"**.kproj", 

"**.user", 

"* *.vspscc" 

], 

"dependencies": { 

"Kestrel": "1.0.0-*", 

"Microsoft.AspNet.Diagnostics" : "1.0.0-*", 

"Microsoft.AspNet.Mvc" : "6.0.0-*", 

"Microsoft.AspNet.Server.IIS" : "1.0.0-*", 

"Microsoft.AspNet.Server.WebListener" : "1.0.0-*", 

"Microsoft.AspNet.StaticFiles" : "1.0.0-*" 

}, 

"commands": { 

"web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Serve 
"kestrel": "Microsoft.AspNet.Hosting --server Kestrel --server.u 

}, 

"frameworks": { 

"dnx451" : { }, 

"dnxcore50": { } 

} 

} 


We also add launchSettings.json to configure how to execute the program. Store it on 
Properties folder. Write this script for launchSettings.json file. 

{ 

"profiles": { 

"IIS Express" : { 

"commandName" : "IISExpress", 

"launchBrowser" : true, 

"environmentVariables" : { 

"ASPNET_ENV" : "Development" 

} 

}, 

"kestrel": { 

"commandName": "kestrel", 

"launchBrowser": true, 

"launchUrl" : "http://localhost:5004" 

}, 

"web": { 

"commandName": "web", 

"launchBrowser": true, 

"launchUrl" : "http://localhost:5001" 

} 

} 

} 








App will start by executing Startup.es file. Create this file and write this code. 

using Microsoft.AspNet.Builder ; 

using Microsoft.Framework.Dependencylnjection ; 

namespace WebDemo 

{ 

public class Startup 

{ 

public void ConfigureServices( IServiceCollection services) 

{ 

services.AddMvc(); 

} 

public void Configure( IApplicationBuilder app) 

{ 

// handle error page 

app.UseErrorPage(); 

// handle static file requests 

app.UseStaticFiles(); 

// aspnet routing 

app.UseMvc(routes => 

{ 

routes.MapRoute("default", "{controller=Home}/{action= 

}); 

} 

} 

} 



6.3 Writing Program 

In this section, we write our ASP.NET 5 MVC program. 


6.3.1 Creating Model 


Firstly, we create a model, called Product. The following is code implementation. 


using System.ComponentModel.DataAnnotations ; 


namespace WebDemo.Web.Models 

{ 

public class Product 

{ 


[Required] 

[MinLength(4) ] 

[Display( Name = "Name" )] 
public string Name { get; set; } 
[Display( Name = "Product Code" )] 
public string ProductCode { get; set; } 
[Display( Name = "Quantity" )] 
public int Quantity { get; set; } 
[Display( Name = "Price" )] 
public double Price { get; set; } 


} 


} 


Save this code into a file, called Product.cs and store it into Models folder. 


6.3.2 Dummy Database 


In this case, we don’t access database directly so we create a dummy database which 
generates product data. Create a file, called DumpDatabase.es and write this code. 

I using System; 

using System.Collections.Generic ; 

using WebDemo.Web.Models; 
namespace WebDemo.Web.Database 

public class DumpDatabase 

private DumpDatabase( ){} 

public static List<Product> GetAllProducts() 





// generate data 

List<Product> list = new List<Product>(); 
for(int i=0;i<10;i++){ 

var item = new Product(); 

item.Name = String.Format("Product {0}" 

item.ProductCode = String.Format("K0{0] 

item.Quantity = 4 + i; 

item.Price = 1.43 * (i+1); 

list.Add(item); 


} 

return list; 


} 


} 


Save this file into Database folder. 


6.3.3 Creating Controller 


Furthermore, we build a controller, called Home by creating a file, called 
HomeController.es. Write this code. 

using System; 

using System.Collections.Generic ; 
using Microsoft.AspNet.Mvc; 

using WebDemo.Web.Models; 
using WebDemo.Web.Database; 
namespace WebDemo.Web.Controllers 

{ 

public class HomeController : Controller 

{ 

public IActionResult Index() 

{ 

return View( ); 

} 

[HttpPost] 

public JsonResult GetAllProducts( ) 

{ 

List<Product> list = DumpDatabase.GetAllProducts(); 


return Json(list); 










Save this file into Controllers folder. 


6.3.4 Creating View 


We create a page, Index.cshtml. We also create a layout, called _Shared.cshtml. Write 
this script. 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf -8" /> 

<meta name="viewport" content="width=device-width, initial-scale=l.0 
<title>@ViewBag.Title - MyASP.NET Application</title> 

<link rel=" stylesheet" href="//netdna .bootstrapcdn.com/bootstrap/3.0 
<link href="~/css/simple .css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div class="navbar navbar-inverse navbar-fixed-top"> 

<div class="container "> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle" data-toggl4= 
<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

</div> 

<div class="navbar-collapse collapse"> 

<ul class="nav navbar-nav"> 

<li><a href="/">Home</ax/li> 

</ul> 

</div> 

</div> 

</div> 

<div class="container body-content"> 

@RenderBody() 

<footer> 

<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
</footer> 

</div> 

</body> 

</html> 









The following is a script for Index.cshtml file. 


Layout = "/Views/Shared/_Layout.cshtml"; 
ViewBag.Title = "Home Page"; 


} 

<script src="~/js/lib/angular .min . js"x/script> 

<script src="~/j s/service s/product service . j s"x/script> 
<div class=" jumbotron"> 


<hl>ASP .NET 5 MVC, ASP.NET RESTful, and Angular JS</hl> 

<p class="lead"> This is demo to illustrate how to use ASP.NET 5 M\> 
</div> 


C 


<h2>Product Application</h2> 
<br /> 


<div ng-app="ProductService" ng-controller="MyControlller" > 

<p> 

<button class="btn btn-primary btn-large" ng-click="getAllData( ) 

</p> 

<table> 

<thead> 


<tr> 

<th>Product Name</th> 

<th>Code</th> 

<th>Quantity</th> 

<th>Price</th> 

<th>Action</th> 

</tr> 

</thead> 

<tbody ng-repeat="product in products'^ 

<tr ng-class="{even : Seven, odd: $odd}"> 

<td>{{ product.Name }}</td> 

<td>{{ product.ProductCode} }</td> 

<td>{{ product.Quantity}}</td> 

<td>{{ product.Price | number: 2}}</td> 

<td> 

<a href=" javascript:void(0)" ng-click="select(produc 
</td> 


</tr> 


</tbody> 

</table> 

<p>Selected: {{ selected }}</p> 
</div> 


<pxbrx/p> 


This file loads AngularJS files. We write them on next section. 
Save all files. The following is our View structure. 








4 Views 


* Home 

lndex.cshtml 

* Shared 

_Layout.cshtmi 


6.3.5 Angular JS Program 

Firstly, download AngularJS on http://code.angularjs.org/ . Put those files into /js/lib folder. 


* wwwroot 

* css 

simple.css 

‘‘Is 

* lib 

angular.min.js 

angular.min.js.map 

^ services 

productservicejs 


The next step is to write AngularJS program. Create a file, called productservice.js, and 
write this script. 

var myApp = angular.module('ProductService', []); 

myApp.service!'DataService ', function ($http) { 

this. read = function (callback) { 

$http({ 

method: 'POST', 

url: 'Home/GetAllProducts/', 

headers: { 

'Content-type': 'application/json' 

} 

}). success(function (resp) { 
callback!resp )) 

}).error (function () { 
callback (undefined) ; 

}); 

}; 

}); 

myApp.controller!'MyControlller', function ($scope, DataService) { 









$scope.products = []; 

$scope.selected = {}; 

$scope.getAllData = function () { 

DataService. read(function (data) { 
$scope.products = data; 

}); 

}; 

$scope.select = function (selected) { 
$scope.selected = selected; 

}; 

}); 


The following is a script for simple.css file. 

table { margin: lem; border-collapse: collapse; } 
td, th { padding: .3em; border: lpx #ccc solid; } 
thead { background: #70ff45; } 

.even{ 

background-color: #beffca; 

} 

.odd{ 

background-color: #f0fff6; 

} 













6.4 Testing 


Now you are ready to execute. Type these command to load required libraries and execute 
the program. 

I dnu restore 
dnx . kestrel 

Open a browser and navigate to http://localhost:5004 . 



ASP.NET 5 MVC, 
ASP.NET RESTful, 



This is demo to illustrate how to use ASP.NET 5 MVC, ASP.NET 5 
RESTful and AngularJS. 


Product Application 



Product Name Code Quantity Price Action 


Selected: {} 


Click Load data from server button. It should show data which come from a server. 









localhost 


• • • < El 


Home 



Product Application 


Load data from server 


Product Name 

Code 

Quantity 

Price 

Action 

Product 1 

KOI 

4 

1.43 

edit 

Product 2 

K02 

5 

2.86 

edit 

Product 3 

K03 

6 

4.29 

edit 

Product 4 

K04 

7 

5.72 

edit 

Product 5 

K05 

8 

7.15 

edit 

Product 6 

K06 

9 

8.58 

edit 

Product 7 

K07 

10 

10.01 

edit 

Product 8 

K08 

11 

11.44 

edit 

Product 9 

K09 

12 

12.87 

edit 

Product 10 

K010 

13 

14.30 

edit 


Selected: {} 


Try to click edit menu on table row. Then, selected item will show on the bottom. 
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localhost 
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Product Application 


Load data from server 


Product Name Code Quantity Price Action 

Product 1 KOI 

4 

1.43 

edit 

Product 2 

K02 

5 

2.86 

edit 

Product 3 K03 

6 

4.29 

edit 

Product 4 

K04 

7 

5.72 

edit 

Product 5 K05 

8 

7.15 

edit 

Product 6 

K06 

9 

8.58 

edit 

Product 7 K07 

10 

10.01 

edit 

Product 8 

K08 

11 

11.44 

edit 

Product 9 K09 

12 

12.87 

edit 

Product 10 

K010 

13 

14.30 

edit 


Selected: {"Name":"Product 2“,"ProductCode'': , 'K02" 1 ''Quantity":5,”Price":2.86} 



































6.5 What’s The Next? 


You can do more practices for AngularJS by reading several tutorial in Internet or books. I 
also wrote a book about AngularJS Programming by Example. This book helps you to 
learn about AngularJS programming. Please visit my blog, 
http://blog.aguskurniawan.net/post/AngularJS.aspx . 


AngularJS 

Programming By Example 





Source Code 


Source code can be downloaded on 

http://www.aguskurniawan.net/book/aspnet5 06062015ZFR.zip.zip . 



Contact 


If you have question related to this book, please contact me at aguskur@hotmail.com . My 
blog: http://blog.aguskurniawan.net . 



